<template>
  <div class="box-jiu">

    <div class="item-box" v-for="(item,index) in  list" :key="index">
<!--      <img :src="item" alt="">-->
      <el-image
          fit="cover"
          style="width: 200px; height: 400px"
          :src="item.url"
          :preview-src-list="item.list">
      </el-image>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[
        {
          url:require('@/assets/images/book/1.jpg'),
          list:[require('@/assets/images/book/1.jpg')]
        },
        {
          url:require('@/assets/images/book/2.jpg'),
          list:[require('@/assets/images/book/2.jpg')]
        },
        {
          url:require('@/assets/images/book/3.jpg'),
          list:[require('@/assets/images/book/3.jpg')]
        },
        {
          url:require('@/assets/images/book/4.jpg'),
          list:[require('@/assets/images/book/4.jpg')]
        },
        {
          url:require('@/assets/images/book/5.jpg'),
          list:[require('@/assets/images/book/5.jpg')]
        },
        {
          url:require('@/assets/images/book/6.jpg'),
          list:[require('@/assets/images/book/6.jpg')]
        },
        {
          url:require('@/assets/images/book/7.jpg'),
          list:[require('@/assets/images/book/7.jpg')]
        },
        {
          url:require('@/assets/images/book/9.jpg'),
          list:[require('@/assets/images/book/9.jpg')]
        },
        {
          url:require('@/assets/images/book/10.jpg'),
          list:[require('@/assets/images/book/10.jpg')]
        },
        {
          url:require('@/assets/images/book/11.jpg'),
          list:[require('@/assets/images/book/11.jpg')]
        },
        {
          url:require('@/assets/images/book/12.jpg'),
          list:[require('@/assets/images/book/12.jpg')]
        },
        {
          url:require('@/assets/images/book/13.jpg'),
          list:[require('@/assets/images/book/13.jpg')]
        },
        {
          url:require('@/assets/images/book/14.jpg'),
          list:[require('@/assets/images/book/14.jpg')]
        }
      ],
    }
  }
}
</script>

<style scoped lang="scss">
  .box-jiu{
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    .item-box{
      width: 200px;
      height: 400px;
      margin-bottom: 10px;
      img{
        width: 200px;
        height: 400px;
        object-fit: cover;
      }
    }
  }
</style>